/**
 * @name Home
 * @description
 * @author darcrand
 */

import React from 'react'
import { Link } from 'react-router-dom'
import { observer } from 'mobx-react'
import { Button } from 'antd'

import { get } from '@/utils/axios'
import { useStore } from '@/store'

const Home: React.FC = observer(() => {
  const { user } = useStore()
  const isLogin = user.state.uid

  return (
    <>
      <h1>Home</h1>

      <ol>
        <li>
          <h2>mobx store</h2>
          {isLogin ? (
            <>
              <p>nickname: {user.state.nickname}</p>
              <Button type='primary' onClick={user.logout}>
                log out
              </Button>
            </>
          ) : (
            <>
              <Button type='primary' onClick={user.login}>
                log in
              </Button>
            </>
          )}
        </li>

        <li>
          <h2>router</h2>
          <Link to='/about'>
            <Button>goto about</Button>
          </Link>
        </li>

        <li>
          <h2>axios</h2>
          <Button
            onClick={() => {
              get('/topics')
            }}
          >
            get Topics (open dev-tools F12)
          </Button>
        </li>
      </ol>
    </>
  )
})

export default Home
